// packageK/fuzhi/valueAdded/valueAdded.js
var o = require("../../../ec-canvas/echarts"),s = getApp();
let myChart = null

Page({

  /**
   * 页面的初始数据
   */
  data: {
    infoData:{},
    ecFans: {
      lazyLoad: !0
    },
    threeInd:0,
    tabInd:2,
    option: {
      color: ['#1991ff',"#16a036","#ee6969"],
      tooltip: {
        position: [30, 20],
        triggerOn: 'click', //点击才会出现提示框
          trigger: 'axis',
          backgroundColor: 'rgba(0, 0, 0,0.7)', // 背景颜色
          textStyle: { // 文本样式
              color: '#fff', // 文本颜色
              fontSize: 12 // 文本大小
            },
          formatter: function(params) {
              const param = params[0];
              return `日期: ${param.name} ${param.seriesName}: ${param.value}`;
          }
      },
      xAxis: {
        type: 'category',
        data:[],
        // boundaryGap: false, // 不留白，从原点开始
        // show:false,
        axisTick: {
            show: false  // 隐藏刻度线
        },
        axisLabel: {
            show: false  // 隐藏刻度标签
        }
      },
      yAxis: {
        type: 'value',
        axisLine: {
          show: true, // 显示轴线
          lineStyle: {
              color: '#a6a6a6', // 设置 Y 轴轴线颜色
          },
        },
        splitLine :{
          lineStyle:{
            type:'dashed',//虚线
            color:"#ccc"
          },
        },
        min: 'dataMin',  // 设置Y轴最小值为数据最小值
        splitNumber:4,
        axisLabel: {
          // interval: 5 ,// 设置为6，表示只显示6个标签
          formatter: function (value) {
            if(value % 1 !== 0){
              return value.toFixed(3);
            }
            // 使用 toFixed 方法限制小数点后最多3位
             return value
          },
          color:"#000"
        },
      },
      series: [{
        name: '养老基金价格',
        type: 'line',
        stack: 'Total',
        smooth: true,
        showSymbol: false,
        lineStyle: {
          //   width: 2
          // 线条加阴影
          // 设置阴影颜色
          shadowColor: "#3D5DF4",
          shadowOffsetX: 0,
          // 设置阴影沿y轴偏移量为9
          shadowOffsetY: 9,
          // 设置阴影的模糊大小
          shadowBlur: 10,
          // 设置线条渐变色
          color: new o.graphic.LinearGradient(0, 0, 1, 0, [
            { offset: 0, color: "#3D5DF4" },
            { offset: 1, color: "#3D5DF4" },
          ]),
        },
        //  areaStyle: {
        //   opacity: 0.4,
        //   color: new o.graphic.LinearGradient(0, 0, 0, 1, [{
        //       offset: 0,
        //       color: 'rgb(51, 123, 237)'
        //     },
        //     {
        //       offset: 1,
        //       color: 'rgb(255, 255, 255)'
        //     }
        //   ])
        // },
    
        emphasis: {
          focus: 'series'
        },
        data: []
      }],
      grid: {
        left: '0%',
        right: '0%',
        bottom: '0%',
        top: '5%',
        containLabel: true
      },
    },
    threeLines:[
      {
        //   width: 2
        // 线条加阴影
        // 设置阴影颜色
        shadowColor: "#1991ff",
        shadowOffsetX: 0,
        // 设置阴影沿y轴偏移量为9
        shadowOffsetY: 9,
        // 设置阴影的模糊大小
        shadowBlur: 10,
        // 设置线条渐变色
        color: new o.graphic.LinearGradient(0, 0, 1, 0, [
          { offset: 0, color: "#1991ff" },
          { offset: 1, color: "#1991ff" },
        ]),
      },
      {
        //   width: 2
        // 线条加阴影
        // 设置阴影颜色
        shadowColor: "#16a036",
        shadowOffsetX: 0,
        // 设置阴影沿y轴偏移量为9
        shadowOffsetY: 9,
        // 设置阴影的模糊大小
        shadowBlur: 10,
        // 设置线条渐变色
        color: new o.graphic.LinearGradient(0, 0, 1, 0, [
          { offset: 0, color: "#16a036" },
          { offset: 1, color: "#16a036" },
        ]),
      },
      {
        //   width: 2
        // 线条加阴影
        // 设置阴影颜色
        shadowColor: "#ee6969",
        shadowOffsetX: 0,
        // 设置阴影沿y轴偏移量为9
        shadowOffsetY: 9,
        // 设置阴影的模糊大小
        shadowBlur: 10,
        // 设置线条渐变色
        color: new o.graphic.LinearGradient(0, 0, 1, 0, [
          { offset: 0, color: "#ee6969" },
          { offset: 1, color: "#ee6969" },
        ]),
      },
    ],
    chartData:{
      categories: [],
      series:[
        {
          name:"养老基金价格",
          data:[]
        },
        {
          name:"存利总额",
          data:[]
        },
        {
          name:"总持有量",
          data:[]
        },
      ]
    }
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    // const newChartData = { ...this.data.chartData }; // 复制原数据（避免直接修改引用）
    // const series = newChartData.series;
    // 将新数据更新到页面 data 中
    // this.setData({
    //   chartData: newChartData
    // }, () => {
    //   // 数据更新后，调用图表组件的渲染方法（需根据具体组件调整）
    //   console.log(this.data);
    // });
    this.info()
  },
  info(e){
    var a = s.getNetAddresss("Fuzhi.oldMiniChartData"), t= this;
    s._postNetWork({
      url:a,
      data:{
        type:t.data.tabInd
      },
      success(l){
        let i = l.data
        if(i.result == 1){
          let arr = t.data.chartData
          arr.categories = []
          arr.series[0].data = []
          arr.series[1].data = []
          arr.series[2].data = []
          i.data.list.forEach(item=>{
            arr.categories.push(item.create_time)
            arr.series[0].data.push(item.integral_rate)
            arr.series[1].data.push(item.integral_pool)
            arr.series[2].data.push(item.integral_handle)
          })
          t.setData({
            infoData:i.data,
            chartData:arr
          }, () => {
            // 数据更新后，调用图表组件的渲染方法（需根据具体组件调整）
            let num = t.data.threeInd == 0 ? 1 : t.data.threeInd
            t.getCanvas(num,e)
          });
        }
      }
    })

  },


  init(params){
    myChart = this.selectComponent('#myChart')
    myChart.init((canvas, width, height, dpr)=>{
      let wid = width - 10 
      let hei = height - 20 
      const chart = o.init(canvas,null,{ width:wid, height:hei, dpr})
      chart.setOption(this.data.option)
      return chart
    })
  },
  getCanvas(e,tab){
    let d = e.currentTarget ? e.currentTarget.dataset.item : e
    if(this.data.threeInd == d && tab!=1)return
    this.setData({
      threeInd:d
    })
    let opt = this.data.option
    opt.xAxis.data = this.data.chartData.categories
    if(d == 1){
      opt.series[0].name = this.data.chartData.series[0].name
      opt.series[0].data = this.data.chartData.series[0].data
      opt.series[0].lineStyle = this.data.threeLines[0]
      this.setData({
        option:opt
      })
    }else if(d == 2){
      opt.series[0].name = this.data.chartData.series[1].name
      opt.series[0].data = this.data.chartData.series[1].data
      opt.series[0].lineStyle = this.data.threeLines[1]
      this.setData({
        option:opt
      })
    }else if(d == 3){
      opt.series[0].name = this.data.chartData.series[2].name
      opt.series[0].data = this.data.chartData.series[2].data
      opt.series[0].lineStyle = this.data.threeLines[2]
      this.setData({
        option:opt
      })
    }
    this.init()
  },
  selectTab(e){
    let t = e.currentTarget.dataset.tab
    if (this.data.tabInd == t) return
    this.setData({
      tabInd:t,
    })
    this.info(1)
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})